<template>
  <div>
    <items-head title="购物车" />
    <div class="wrap">
      <van-swipe-cell v-for="(item, index) in items"
                      :key="item.id">
        <div class="item"
             @click="prevDetail(item.goodsId)">
          <van-checkbox @click="swithCheck(index)"
                        v-model="item.selected"></van-checkbox>
          <van-card :num="item.number"
                    :price="item.price * item.number"
                    :title="item.name"
                    :thumb="item.pic">
            <template #footer>
              <van-stepper @change="changeStepper(index)"
                           v-model="item.number" />
            </template>
          </van-card>
        </div>
        <template #right>
          <van-button @click="delList(item.key)"
                      square
                      text="删除"
                      type="danger"
                      class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar :price="total*100"
                    button-text="提交订单"
                    @submit="onSubmit">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <home-tabbar />
  </div>
</template>

<script>
import HomeTabbar from 'components/HomeTabbar'
import ItemsHead from 'components/ItemsHead'
import { CartItems, changeStepper, switchItem, delList } from 'api'
import { getToken } from 'utils'
export default {
  name: 'cart',
  data () {
    return {
      items: [],
      total: 0
    }
  },
  created () {
    this.CartItems()
  },
  watch: {
    items () {
      this.$store.commit('cart/set_items', this.items)
    }
  },
  methods: {
    prevDetail (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    delList (key) {
      this.$dialog.confirm({
        title: '删除商品',
        message: '您确定删除吗？'
      }).then(() => {
        delList({
          key,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.items = res.data.data.items
            this.total = res.data.data.price
          }
          if (res.data.code === 700) {
            this.items = []
            this.total = 0
          }
        })
      })
    },
    onSubmit () { this.$router.push('/confirmorder') },
    changeStepper (index) {
      const { key, number } = this.items[index]
      changeStepper({
        key,
        number,
        token: getToken()
      }).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    },
    swithCheck (index) {
      const { key, selected } = this.items[index]
      switchItem({
        key,
        selected,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    },
    CartItems () {
      CartItems({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
        }
      })
    }
  },
  computed: {
    allChecked: {
      get () {
        return this.items.length === 0 ? false : this.items.every(item => item.selected)
      },
      set (val) {
        const keys = []
        this.items.forEach((item) => {
          keys.push(item.key)
        })
        switchItem({
          key: keys.join(','),
          selected: val,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.items = res.data.data.items
            this.total = res.data.data.price
          }
        })
      }
    }
  },
  components: {
    HomeTabbar,
    ItemsHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 46px 0 100px 0;
  .item {
    display: flex;
    background-color: #fff;
    .van-card {
      flex: 1;
    }
    .van-checkbox {
      padding: 10px;
    }
  }
  .delete-button {
    height: 100%;
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>
